<template>
  <div class="classroom-list-wrap">
    <!-- <div class="classroom-list-sort">
      <el-button type="primary" size="small">智能排序</el-button>
    </div> -->
    <el-tabs v-model="activeTab" @tab-click="handleTabClick">
      <el-tab-pane v-for="tab in tabs" :key="tab.name" :label="tab.label"
                   :name="tab.name"></el-tab-pane>
    </el-tabs>
    <ul v-if="dataList.length > 0">
      <li v-for="item in dataList" :key="item.historyId">
        <div v-if="item.collectSts == '0'" class="content-info">
          <div class="cover-img" :style="{'background':'url('+getImgUrl(item.coverId)+')','background-size': 'cover','background-repeat': 'no-repeat'}" @click="toLookSubject(item)"></div>
          <!-- <el-image :src="getImgUrl(item.coverId)"></el-image> -->
          <div class="subject-info">
            <div class="subject-info-title">
              <span class="text">{{item.videoName}}</span>
            </div>
            <div class="subject-info-content">
              <i class="classroom-book-icon"></i>
              <div class="subject-type">
                <!-- {{item.subject+'-'+item.grade+'-'+item.volume+'-'+item.version}} -->
                <!-- <dt-dict-tag :options="dict.type.subject" :value="item.subject" /> -->
                <span>
                  <dt-dict-tag :options="dict.type.subject" :value="item.subject" />
                </span>
                <span>
                  <dt-dict-tag :options="dict.type.grade" :value="item.grade" />
                </span>
                <span>
                  <dt-dict-tag :options="dict.type.volume" :value="item.volume" />
                </span>
                <span>
                  <dt-dict-tag :options="dict.type.version" :value="item.version" />
                </span>
              </div>
            </div>
            <div class="subject-info-content"><i class="classroom-teacher-icon"></i><span>{{item.createUserName}}</span></div>
            <div class="subject-info-content">
              <i class="classroom-time-icon"></i><span>{{ item.vedioDict == '1'? item.historyTime:item.createTime}}</span>
            </div>
          </div>
          <div class="concent-button">
            <el-button v-if="item.vedioDict == '1'" type="danger" @click="deleteViewInfo(item)">删除</el-button>
            <el-button v-else type="warning" @click="deleteViewInfo(item)">取消收藏</el-button>
          </div>
        </div>
        <div v-else class="content-info">
          <div class="cover-img"></div>
          <div class="subject-info">
            <span>视频资源已失效</span>
          </div>
          <div class="concent-button">
            <el-button type="warning" @click="deleteViewInfo(item)">取消收藏</el-button>
          </div>
        </div>
      </li>
      <el-pagination
        v-if="total > 10"
        @current-change="handleCurrentChange"
        :current-page.sync="current"
        :page-size="10"
        layout="total, prev, pager, next"
        :total="total">
      </el-pagination>
    </ul>
    <el-empty class="empty" description="暂无数据" v-else></el-empty>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { cloud } from '@/framework/utils/request'
import { goCancelCollectInfo, goCancelHistoryInfo } from '@/api/classroom/learnVideoManage'

export default {
  name: 'RecordList',
  dicts: ['period', 'grade', 'subject', 'version', 'volume'],
  props: {
    dataList: {
      type: Array,
      default: () => []
    },
    tabs: {
      type: Array,
      default: () => [
        {
          label: '全部',
          name: ''
        }
      ]
    }
  },
  data() {
    return {
      total: 0,
      current: 1,
      activeTab: '',
      baseURL: process.env.VUE_APP_BASE_API + cloud.file
    }
  },
  computed: {
    ...mapGetters(['onlineStudy'])
  },
  methods: {
    handleTabClick(val) {},
    toLookSubject(row) {
      const obj = this.onlineStudy.find((item) => item.menuId == row.menuId)
      localStorage.setItem('courseDataList', JSON.stringify(this.dataList))
      this.$router.push({
        path: '/onlineClassroom/study',
        query: {
          menuPath: obj.path,
          vid: row.id
        }
      })
    },
    handleCurrentChange(val) {
      this.$emit('refresh', {
        pageNo: this.current,
        pageSize: 10
      })
    },
    // 获取封面图片路径
    getImgUrl(id) {
      return `${this.baseURL}/sysFileInfo/public/preview?fileId=${id}`
    },
    deleteViewInfo(data) {
      if (data.vedioDict == '1') {
        goCancelHistoryInfo({ ids: [data.historyId], id: data.historyId }).then((res) => {
          if (res.code == '00000') {
            this.$message.success('操作成功！')
            this.handleCurrentChange()
          }
        })
      } else {
        goCancelCollectInfo({ ids: [data.collectId], id: data.collectId }).then((res) => {
          if (res.code == '00000') {
            this.$message.success('取消收藏成功！')
            this.handleCurrentChange()
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.classroom-list-wrap {
  position: relative;
  background-color: #fff;
  box-shadow: 0 3px 6px #00000029;
  border-radius: 0 0 4px 4px;
  padding: 20px;
  width: 100%;
  min-height: calc(100vh - 130px);
  .classroom-list-sort {
    position: absolute;
    right: 20px;
    top: 20px;
    z-index: 99;
  }
  ul {
    margin-block-start: 0;
    margin-block-end: 0;
    padding-inline-start: 0;
    margin-top: 5px;
    li {
      display: flex;
      align-items: center;
      list-style: none;
      margin-bottom: 20px;
      .content-info {
        display: flex;
        align-items: center;
        width: 100%;
      }
      .cover-img {
        width: 280px;
        height: 150px;
        // background-color: pink;
        background: url("../assets/img/test-img.png") no-repeat;
        background-size: cover;
        background-position: center center;
        margin-right: 42px;
        cursor: pointer;
      }
      .subject-info {
        flex: 1;
        &-title {
          margin-bottom: 16px;
          .el-tag {
            height: 22px;
            margin-right: 6px;
            border-radius: 11px;
            line-height: 20px !important;
            padding: 0 5px;
            border: 1px solid #004fff;
            font-family: "Source Han Sans CN";
            font-weight: 500;
            font-size: 12px;
            color: #004fff;
            vertical-align: middle;
          }
          .text {
            font-family: "Source Han Sans CN";
            font-weight: 500;
            font-size: 16px;
            text-align: left;
            color: #00080f;
            vertical-align: middle;
          }
        }
        &-content {
          display: flex;
          align-items: center;
          font-family: "Source Han Sans CN";
          font-weight: 500;
          font-size: 14px;
          text-align: left;
          color: #808080;
          margin-bottom: 16px;
          .subject-type {
            display: flex;
          }
          span {
            margin-right: 16px;
            vertical-align: middle;
          }
          i {
            display: inline-block;
            width: 14px;
            height: 14px;
            vertical-align: middle;
            margin-right: 2px;
          }
        }
        &-content:last-child {
          margin-bottom: 0;
        }
        .comment {
          color: #004fff;
        }
        .like {
          color: #ff7b3f;
        }
      }
      .concent-button {
        margin: 0px 30px;
      }
    }
  }
  .empty {
    width: 200px;
    text-align: center;
    margin: 80px auto 0;
  }
}
.classroom-time-icon {
  background: url("../assets/icons/time-icon.png") no-repeat;
  background-size: cover;
}
.classroom-like-icon {
  background: url("../assets/icons/like-active-icon.png") no-repeat;
  background-size: cover;
}
.classroom-teacher-icon {
  background: url("../assets/icons/teacher-icon.png") no-repeat;
  background-size: cover;
}
.classroom-site-icon {
  background: url("../assets/icons/site-icon.png") no-repeat;
  background-size: cover;
}
.classroom-comment-icon {
  background: url("../assets/icons/comment-icon.png") no-repeat;
  background-size: cover;
}
.classroom-book-icon {
  background: url("../assets/icons/book-icon.png") no-repeat;
  background-size: cover;
}
</style>
<style lang="scss">
.classroom-list-wrap {
  .el-tabs__item {
    font-family: "Source Han Sans CN";
    font-weight: 500;
    font-size: 20px;
    color: #00080f;
  }
  .el-tabs__active-bar {
    height: 4px;
    border-radius: 2px;
    // margin-top: 2px;
  }
  .el-tabs__nav-wrap::after {
    // height: 2px!important;
    bottom: 1px;
  }
  .el-tabs__nav {
    padding-bottom: 4px;
  }
}
</style>
